<template>
  <div class="tender-request">
    <!-- 动态背景 -->
    <div class="animated-bg">
      <div class="light-beam"></div>
      <div class="particles"></div>
      <div class="cyber-grid"></div>
    </div>

    <!-- 头部区域 -->
    <div class="header">
      <h1 class="title">
        <span class="icon"><i class="fas fa-gavel"></i></span>
        招标大厅
      </h1>
      <div class="stats-bar">
        <div class="stat-item">
          <div class="stat-value" v-animate-number="1234">0</div>
          <div class="stat-label">累计发布</div>
        </div>
        <div class="stat-item">
          <div class="stat-value" v-animate-number="891">0</div>
          <div class="stat-label">本月新增</div>
        </div>
        <div class="stat-item">
          <div class="stat-value" v-animate-number="99.8" :decimals="1">0</div>
          <div class="stat-label">成功率(%)</div>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="content">
      <!-- 发布流程指引 -->
      <div class="process-guide">
        <h2>发布流程</h2>
        <div class="steps">
          <div v-for="(step, index) in steps" :key="index" class="step">
            <div class="step-icon">
              <i :class="step.icon"></i>
            </div>
            <div class="step-content">
              <h3>{{ step.title }}</h3>
              <p>{{ step.desc }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 发布表单 -->
      <div class="tender-form-container">
        <h2>发布招标</h2>
        <el-form :model="tenderForm" ref="tenderForm" class="tender-form" :rules="formRules">
          <el-form-item label="接口名称" prop="interfaceName">
            <el-input 
              v-model="tenderForm.interfaceName" 
              placeholder="请输入接口名称">
              <template #prefix>
                <i class="fas fa-code"></i>
              </template>
            </el-input>
          </el-form-item>
          
          <el-form-item label="预算范围" prop="budget">
            <div class="budget-range">
              <el-input-number 
                v-model="tenderForm.budgetMin"
                :min="0"
                :step="1000"
                placeholder="最小预算">
              </el-input-number>
              <span class="separator">至</span>
              <el-input-number 
                v-model="tenderForm.budgetMax"
                :min="0"
                :step="1000"
                placeholder="最大预算">
              </el-input-number>
            </div>
          </el-form-item>
          
          <el-form-item label="开发周期" prop="developmentPeriod">
            <el-input 
              v-model="tenderForm.developmentPeriod" 
              placeholder="预计开发周期">
              <template #prefix>
                <i class="fas fa-calendar"></i>
              </template>
            </el-input>
          </el-form-item>
          
          <el-form-item label="通知邮箱" prop="notificationEmail">
            <el-input 
              v-model="tenderForm.notificationEmail" 
              placeholder="接收通知的邮箱地址">
              <template #prefix>
                <i class="fas fa-envelope"></i>
              </template>
            </el-input>
          </el-form-item>
          
          <el-form-item label="接口需求" prop="interfaceRequirements">
            <el-input 
              type="textarea" 
              v-model="tenderForm.interfaceRequirements"
              :rows="4"
              placeholder="详细描述您的接口需求">
            </el-input>
          </el-form-item>

          <el-form-item>
            <div class="form-actions">
              <el-button type="primary" @click="submitTender" :loading="isSubmitting">
                <i class="fas fa-paper-plane"></i>
                {{ isSubmitting ? '发布中...' : '发布招标' }}
              </el-button>
              <el-button @click="resetForm">
                <i class="fas fa-redo"></i>
                重置
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>

      <!-- 最近招标 -->
      <div class="recent-tenders">
        <h2>最近招标</h2>
        <div class="tender-list">
          <div v-for="tender in recentTenders" :key="tender.id" class="tender-item">
            <div class="tender-header">
              <h3>{{ tender.title }}</h3>
              <span :class="['status', tender.status]">{{ tender.statusText }}</span>
            </div>
            <p class="tender-desc">{{ tender.description }}</p>
            <div class="tender-meta">
              <span><i class="fas fa-clock"></i> {{ tender.time }}</span>
              <span><i class="fas fa-user"></i> {{ tender.author }}</span>
              <span><i class="fas fa-eye"></i> {{ tender.views }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 帮助提示 -->
    <div class="help-tooltip" v-if="showHelp">
      <div class="tooltip-content">
        <h3>需要帮助？</h3>
        <p>我们的客服团队随时为您服务</p>
        <button @click="startChat" class="chat-btn">
          <i class="fas fa-comments"></i>
          在线咨询
        </button>
      </div>
    </div>

    <!-- 成功提示 -->
    <el-dialog
      title="发布成功"
      :visible.sync="showSuccessDialog"
      width="30%"
      center>
      <div class="success-content">
        <i class="fas fa-check-circle"></i>
        <h3>招标信息发布成功！</h3>
        <p>您可以在个人中心查看发布的招标信息</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewTender">查看详情</el-button>
        <el-button type="primary" @click="publishNew">继续发布</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "TenderRequest",
  data() {
    return {
      // 表单数据
      tenderForm: {
        interfaceName: '',
        budgetMin: '',
        budgetMax: '',
        developmentPeriod: '',
        notificationEmail: '',
        interfaceRequirements: ''
      },
      
      // 发布流程步骤
      steps: [
        {
          icon: 'fas fa-edit',
          title: '填写信息',
          desc: '详细描述您的接口需求'
        },
        {
          icon: 'fas fa-check-circle',
          title: '审核确认',
          desc: '我们会在24小时内审核'
        },
        {
          icon: 'fas fa-handshake',
          title: '对接开发',
          desc: '匹配最适合的开发者'
        }
      ],
      
      // 最近招标
      recentTenders: [
        {
          id: 1,
          title: '支付接口开发',
          description: '需要开发一个支持多种支付方式的接口...',
          status: 'ongoing',
          statusText: '进行中',
          time: '2小时前',
          author: 'John Doe',
          views: 156
        },
        // ... 更多招标数据
      ],
      
      // 状态控制
      isSubmitting: false,
      showSuccessDialog: false,
      showHelp: true,
      
      // 表单验证规则
      formRules: {
        interfaceName: [
          { required: true, message: '请输入接口名称', trigger: 'blur' }
        ],
        notificationEmail: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        interfaceRequirements: [
          { required: true, message: '请描述接口需求', trigger: 'blur' }
        ]
      }
    };
  },
  
  methods: {
    async submitTender() {
      try {
        await this.$refs.tenderForm.validate();
        this.isSubmitting = true;
        
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1500));
        
        this.showSuccessDialog = true;
      } catch (error) {
        this.$message.error('表单验证失败，请检查输入');
      } finally {
        this.isSubmitting = false;
      }
    },
    
    resetForm() {
      this.$refs.tenderForm.resetFields();
    },
    
    startChat() {
      // 实现在线咨询功能
      console.log('启动在线咨询');
    },
    
    viewTender() {
      // 查看招标详情
      this.showSuccessDialog = false;
    },
    
    publishNew() {
      this.showSuccessDialog = false;
      this.resetForm();
    }
  },
  
  directives: {
    'animate-number': {
      bind(el, binding) {
        const duration = 2000;
        const decimals = binding.arg || 0;
        const endValue = binding.value;
        const startTime = Date.now();
        
        const animate = () => {
          const currentTime = Date.now();
          const progress = Math.min((currentTime - startTime) / duration, 1);
          
          const currentValue = progress * endValue;
          el.textContent = currentValue.toFixed(decimals);
          
          if (progress < 1) {
            requestAnimationFrame(animate);
          }
        };
        
        animate();
      }
    }
  }
};
</script>

<style scoped>
/* 基础样式 */
.tender-request {
  min-height: 100vh;
  background: #f8f9fa;
  position: relative;
  overflow: hidden;
}

/* 动态背景 */
.animated-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.light-beam {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: linear-gradient(
    45deg,
    rgba(66, 133, 244, 0.1) 0%,
    rgba(66, 133, 244, 0.05) 100%
  );
  animation: rotate 20s linear infinite;
}

.particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at center, #4285f4 1px, transparent 1px);
  background-size: 50px 50px;
  animation: float 20s linear infinite;
}

.cyber-grid {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background-image: 
    linear-gradient(rgba(66, 133, 244, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 133, 244, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  animation: grid-move 20s linear infinite;
}

/* 头部样式 */
.header {
  background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
  color: white;
  padding: 4rem 2rem;
  text-align: center;
  position: relative;
}

.title {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.icon {
  background: rgba(255, 255, 255, 0.2);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.stats-bar {
  display: flex;
  justify-content: center;
  gap: 4rem;
  margin-top: 2rem;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.stat-label {
  opacity: 0.8;
}

/* 主要内容区 */
.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  position: relative;
  z-index: 1;
}

/* 发布流程 */
.process-guide {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.steps {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.step {
  text-align: center;
  flex: 1;
  position: relative;
}

.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 30px;
  right: -50%;
  width: 100%;
  height: 2px;
  background: #eee;
}

.step-icon {
  width: 60px;
  height: 60px;
  background: #f8f9fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #1a237e;
  margin: 0 auto 1rem;
  position: relative;
  z-index: 1;
}

/* 表单样式 */
.tender-form-container {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.tender-form {
  margin-top: 2rem;
}

.budget-range {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.separator {
  color: #666;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

/* 最近招标 */
.recent-tenders {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.tender-list {
  margin-top: 2rem;
}

.tender-item {
  padding: 1.5rem;
  border-bottom: 1px solid #eee;
  transition: all 0.3s ease;
}

.tender-item:hover {
  background: #f8f9fa;
}

.tender-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.status {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.9rem;
}

.status.ongoing {
  background: rgba(33, 150, 243, 0.1);
  color: #2196f3;
}

.tender-desc {
  color: #666;
  margin-bottom: 1rem;
}

.tender-meta {
  display: flex;
  gap: 1.5rem;
  color: #999;
  font-size: 0.9rem;
}

.tender-meta i {
  margin-right: 0.5rem;
}

/* 帮助提示 */
.help-tooltip {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  animation: slideIn 0.3s ease;
}

.chat-btn {
  background: #1a237e;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  margin-top: 1rem;
  transition: all 0.3s ease;
}

.chat-btn:hover {
  background: #0d47a1;
  transform: translateY(-2px);
}

/* 成功对话框 */
.success-content {
  text-align: center;
  padding: 2rem;
}

.success-content i {
  font-size: 4rem;
  color: #4caf50;
  margin-bottom: 1rem;
}

/* 动画效果 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

@keyframes grid-move {
  from { transform: translateY(0); }
  to { transform: translateY(30px); }
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-bar {
    flex-direction: column;
    gap: 2rem;
  }
  
  .steps {
    flex-direction: column;
    gap: 2rem;
  }
  
  .step::after {
    display: none;
  }
  
  .budget-range {
    flex-direction: column;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .help-tooltip {
    display: none;
  }
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .tender-request {
    background: #121212;
  }
  
  .process-guide,
  .tender-form-container,
  .recent-tenders,
  .help-tooltip {
    background: #1e1e1e;
    color: #fff;
  }
  
  .tender-item:hover {
    background: #2d2d2d;
  }
  
  .tender-desc {
    color: #aaa;
  }
  
  .tender-meta {
    color: #888;
  }
}
</style>
  